<template>
  <div class="EditAvatar">
    <div>
      <el-radio v-model="avatarsUid" :label="item.id" v-for="(item,index) in avatars" :key="item.id">
        <img alt="" :src="'/api'+item.url">
      </el-radio>
    </div>
    <div>
      <el-button type="primary" @click="editAvatars(avatarsUid)" plain>确定</el-button>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from "vuex";

export default {
  name: "EditAvatar",
  data() {
    return {
      avatarsUid: -1,// 修改的头像id
    }
  },
  methods: {
    ...mapActions('Backend', ['editavatars']),
    ...mapActions(['getUser']),
    // 确定修改头像
    editAvatars(nid) {
      this.editavatars(nid).then(value => {
        if (value['code'] === 200) {
          this.$message({
            message: value['info'],
            type: 'success'
          })
          this.getUser(this.$store.state.userinfo.nid)
          this.avatarsUid = -1
        } else {
          this.$message({
            message: value['info'],
            type: 'error'
          })
        }
      })
    }
  },
  computed: {
    ...mapState('Backend', ['avatars'])
  }
}
</script>

<style scoped lang="less">
// 修改头像
.EditAvatar {
  div:nth-child(1) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    height: 450px;

    .el-radio {
      display: flex;
      align-items: center;
      padding-bottom: 20px;

      .el-radio__label {
        img {
          height: 80px;
          border-radius: 5px;
        }
      }
    }
  }

  div:nth-child(2) {
    > button {
      width: 100px;
      position: absolute;
      bottom: 20px;
      right: 40px;
    }
  }
}
</style>